<template>
<div class="Movie">
    <div class="hot-container">
        <!-- 标题，，-- tab栏切换 -->
        <div class="hot-header">
           <h4>演职人员</h4>
            <div class="hot-right">
                <span style="display: inline-block; width:20vw">全部 &nbsp;{{actorList}}</span>
               <van-icon name="arrow" />
            </div>
        </div>
               <!-- 轮播图 -->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                            <div v-for="(item,index) in actor" :key="index"  class="swiper-slide">
                              <!-- <h3>{{ item.title }}</h3> -->
                              <img src="https://img01.yzcdn.cn/vant/logo.png" alt=""/>
                            <span>
                              {{item.name}}
                            </span>
                            <div v-if="index ===0" class="name-ator">
                              {{item.type}}
                            </div>
                              <div v-else class="name-ator">
                              饰&nbsp;{{item.type}}
                            </div>
                              <!-- <el-button>立即办理</el-button> -->
                          </div>
                    </div>
                    <!-- <div class="swiper-pagination"></div> -->
                </div>
        </div>
</div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
export default {
  name: 'PannelPage',
  components: {},
  props: {
    actor: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      active: 0,
      swiper: null,
      moviewTotal: 8
    }
  },
  computed: {
    actorList () {
      return this.actor.length
    }
  },
  created () {
  },
  methods: {
    getSwiper () {
      this.swiper = new Swiper('.swiper-container', {
        // loop: true, // 无缝
        // autoplay: { // 自动开始
        //   delay: 3000, // 时间间隔
        //   disableOnInteraction: false //* 手动操作轮播图后不会暂停*
        // },
        paginationClickable: true,
        slidesPerView: 3.7, // 一组三个
        spaceBetween: 10, // 间隔
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
        observer: true,
        observeParents: true
      })
    }

  },
  mounted () {
    this.getSwiper()
  }
}
</script>

<style lang="less" scoped>
.Movie{
    padding: 0;
    width: 91%;
    background-color: #f1f1f2;
    margin: 2vw auto;
    border-radius: 3vw;
}
  .admin-empty{
    height: 40vw;
    padding: 0 5vw;
    .van-empty{
      height: 100%;
    }
  }
    .hot-container {
        width: 100%;
        padding: 3vw 3vw;
        .hot-header{
            width: 100%;
            display: flex;
            justify-content: space-between;
            ::v-deep .van-tab--active{
                padding: 0;
                font-size: 4.5vw;
                font-weight:800;
            }
            h4{
                letter-spacing: 0.8vw;
                line-height: 11.2vw;
                color: #000;
                font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', miui, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
            }
            .hot-right{
                width: 25vw;
                height: 100%;
                margin-top: 4%;
                font-size: 3.4vw;
                color: rgb(139, 144, 148);
                span{
                    margin-bottom: 2vh;
                }
            }
        }
        .swiper-slide {
            position: relative;
            height: 38vw;
            width: 36vw;
            background-repeat: no-repeat;
            background-size: contain;
            // background-color: pink;
            img{
                height: 60%;
                width: 100%;
            }
            span{
                display: inline-block;
                width: 100%;
                // 文字超过盒子宽度部分省略
                 overflow: hidden; /* 超出部分隐藏 */
                white-space: nowrap; /* 防止换行 */
                text-align: center;
                text-overflow: ellipsis; /* 超出的文本部分显示省略号 */
                // 字体之间间隔
                 letter-spacing: 0.3vw;
                font-size: 3.9vw;
                margin: 0.9vw 0;
            }
            .name-ator{
                width: 100%;
                text-align: center;
                color: #999;
                font-size: 2.1vh;
            }
        }
    }

</style>
